<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>您的名字 - 个人作品集</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container">
            <a href="#" class="logo">您的名字</a>
            <ul class="nav-links">
                <li><a href="#hero">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#portfolio">作品集</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </div>
    </nav>

    <!-- 英雄区 -->
    <section id="hero" class="hero-section">
        <div class="container">
            <div class="hero-content">
                <h1>你好，我是您的名字</h1>
                <p>一位专注于 [您的职业或专长] 的 [开发者/设计师/等]。</p>
                <p>我热衷于创造美观且实用的解决方案。</p>
            </div>
            <div class="hero-image">
                <img src="imgs/1.jpg.jpg" alt="个人照片"> <!-- 替换为您的个人照片 -->
            </div>
        </div>
    </section>

    <!-- 照片轮播区 -->
    <section id="carousel-section" class="carousel-section">
        <div class="carousel-container">
            <div class="carousel-slide">
                <img src="imgs/1.png.PNG" alt="作品照片1">
            </div>
            <div class="carousel-slide">
                <img src="imgs/2.png.png" alt="作品照片2">
            </div>
            <div class="carousel-slide">
                <img src="imgs/2.jpg.JPG" alt="作品照片3">
            </div>
            <button class="carousel-prev">❮</button>
            <button class="carousel-next">❯</button>
            <div class="carousel-dots"></div>
        </div>
    </section>

    <!-- 关于我区域 -->
    <section id="about" class="about-section">
        <div class="container">
            <h2>关于我</h2>
            <div class="about-content">
                <div class="about-text">
                    <h3>我的故事</h3>
                    <p>在这里写下详细的自我介绍。可以包括您的背景、教育经历、职业发展、个人哲学以及您对特定领域的热情。</p>
                    <p>例如：我是一名经验丰富的 Web 开发者，专注于前端技术，拥有多年构建高性能、用户友好界面的经验。我热衷于学习新事物并解决复杂问题。</p>
                </div>
                <div class="about-skills">
                    <h3>我的技能与兴趣</h3>
                    <div class="skills-grid">
                        <div class="skill-item">
                            <i class="fas fa-code"></i>
                            <span>Web 开发</span>
                        </div>
                        <div class="skill-item">
                            <i class="fas fa-palette"></i>
                            <span>UI/UX 设计</span>
                        </div>
                        <div class="skill-item">
                            <i class="fas fa-brain"></i>
                            <span>AI/ML</span>
                        </div>
                        <div class="skill-item">
                            <i class="fas fa-camera"></i>
                            <span>摄影</span>
                        </div>
                        <!-- 更多技能或兴趣 -->
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 作品集区域 -->
    <section id="portfolio" class="portfolio-section">
        <div class="container">
            <h2>我的作品集</h2>
            <div class="portfolio-grid">
                <!-- 作品项 -->
                <div class="portfolio-item">
                    <img src="https://via.placeholder.com/400x300?text=Project+1" alt="项目1">
                    <h3>项目标题 1</h3>
                    <p>项目简述。</p>
                </div>
                <div class="portfolio-item">
                    <img src="https://via.placeholder.com/400x300?text=Project+2" alt="项目2">
                    <h3>项目标题 2</h3>
                    <p>项目简述。</p>
                </div>
                <div class="portfolio-item">
                    <img src="https://via.placeholder.com/400x300?text=Project+3" alt="项目3">
                    <h3>项目标题 3</h3>
                    <p>项目简述。</p>
                </div>
                <!-- 更多作品 -->
            </div>
        </div>
    </section>

    <!-- 联系表单 -->
    <section id="contact" class="contact-section">
        <div class="container">
            <h2>联系我</h2>
            <form class="contact-form">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="message">消息</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>
                <button type="submit" class="btn-primary">发送消息</button>
            </form>
        </div>
    </section>

    <!-- 页脚区域 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 您的名字. All rights reserved.</p>
            <div class="social-links">
                <a href="https://www.bilibili.com/video/BV1e3t4etExj/?spm_id_from=333.1387.search.video_card.click&vd_source=a096d889a8754e21114ea4db77fe5979" class="social-icon bilibili" target="_blank" aria-label="Bilibili"><i class="fas fa-play"></i></a>
                <a href="https://www.douyin.com/" class="social-icon douyin" target="_blank" aria-label="Douyin"><i class="fab fa-tiktok"></i></a>
                <a href="https://www.kuaishou.com/new-reco?source=PROFILE" class="social-icon kuaishou" target="_blank" aria-label="Kuaishou"><i class="fas fa-video"></i></a>
                <a href="https://www.xiaohongshu.com/explore" class="social-icon xiaohongshu" target="_blank" aria-label="Xiaohongshu"><i class="fas fa-bookmark"></i></a>
            </div>
        </div>
    </footer>

    <!-- AI 对话界面 (模态框) -->
    <div id="ai-chat-modal" class="ai-chat-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>AI 助手</h3>
                <p>智能对话，随时为您服务。</p>
                <button class="close-btn">&times;</button>
            </div>
            <div class="chat-area">
                <div class="chat-message ai">
                    <p>你好！我是您的 AI 助手，有什么可以帮助您的吗？</p>
                </div>
                <!-- 更多聊天消息将在这里动态添加 -->
            </div>
            <div class="chat-input-area">
                <input type="text" id="user-input" placeholder="输入您的问题...">
                <button id="send-msg-btn" class="btn-send"><i class="fas fa-paper-plane"></i></button>
                <!-- <button id="voice-input-btn" class="btn-voice"><i class="fas fa-microphone"></i></button> -->
            </div>
            <div class="chat-controls">
                <button id="clear-chat-btn" class="btn-control">清空对话</button>
                <button id="export-chat-btn" class="btn-control">导出记录</button>
                <!-- <button id="toggle-theme-btn" class="btn-control">切换主题</button> -->
            </div>
        </div>
    </div>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="back-to-top">⬆</button>

    <!-- AI 助手悬浮按钮 -->
    <button id="open-ai-float-btn" class="ai-float-btn">
        <i class="fas fa-robot"></i> AI 助手
    </button>

    <script src="script.js"></script>
</body>
</html>
